﻿@{
    ViewData["Title"] = "MenuIndex";
}
<div class="layui-row layui-col-space10">
    <div class="layui-card" id="headsearch">
        <div class="layui-card-body" style="padding: 0px;">
            <form class="layui-form" action="javascript:;" id="queryform">


                @*
                    <div class="layui-form-item">
                    <input type="hidden" name="OrderId" value="@ViewBag.OrderId" />
                    <input type="hidden" name="UserId" value="@ViewBag.UserId" />
                    <div class="layui-inline">
                    <label class="layui-form-mid">发票状态</label>
                    <div class="layui-input-inline" style="width: 100px;">
                    <select name="InvoiceState" id="InvoiceState">
                    <option value="">--请选择--</option>
                    @foreach (int val in Enum.GetValues(typeof(InvoiceState)))
                    {
                    <option value="@(val)">@(((InvoiceState)val).ToString())</option>
                    }
                    </select>
                    </div>
                    </div>
                    <div class="layui-inline">
                    <label class="layui-form-mid">时间</label>
                    <div class="layui-input-inline">
                    <input class="layui-input" name="StartDate" id="StartDate" placeholder="开始时间">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline">
                    <input class="layui-input" name="EndDate" id="EndDate" placeholder="结束时间">
                    </div>
                    </div>

                *@
                <div class="layui-inline">
                    <label class="layui-form-mid">区域类型</label>
                    <div class="layui-input-inline" style="width: 100px;">
                        <select name="Area" id="Area">
                            <option value="" selected>--请选择--</option>
                            @foreach (var area in @ViewBag.Areas)
                            {
                                <option value="@area">@area</option>
                            }
                            @* <option value="Admin">Admin</option>
                                <option value="API">API</option>*@
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-mid">关键词</label>
                    <div class="layui-input-inline" style="width: 300px;">
                        <input type="text" id="KeyWords" name="KeyWords" placeholder="输入关键词模糊查询" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <div id="search" class="pear-btn pear-btn-md pear-btn-primary submitbtn" data-type="search" lay-submit lay-filter="search"> <i class="layui-icon layui-icon-search"></i>查找</div>
                    <div id="reset" type="reset" class="pear-btn pear-btn-md"><i class="layui-icon layui-icon-refresh"></i>重置</div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body" style="padding: 0px;">
            <table id="listData" class="layui-hide" lay-filter="listData"></table>
        </div>
    </div>
</div>


<script type="text/html" id="toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </button>
    <button class="pear-btn pear-btn-success pear-btn-md" lay-event="expandAll">
        <i class="layui-icon layui-icon-spread-left"></i>
        展开
    </button>
    <button class="pear-btn pear-btn-success pear-btn-md" lay-event="foldAll">
        <i class="layui-icon layui-icon-shrink-right"></i>
        折叠
    </button>
</script>
<script type="text/plain" id="moreTool">
    [
        [{txt: "导出信息", event: "progress"}]
        [{txt: "下载文件", event: "resolve"}]
        [{txt: "查看详情", event: "reopen"}]
    ]
</script>
<script type="text/html" id="tablebar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="setMenuPermission"><i class="layui-icon layui-icon-auz"></i></button>
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="save"><i class="layui-icon layui-icon-face-smile"></i></button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="delete"><i class="layui-icon layui-icon-delete"></i></button>
    <button class="pear-btn pear-btn-sm" id="more_{{d.Id}}"><i class="layui-icon layui-icon-triangle-d"></i></button>
</script>

<script type="text/html" id="tpl_MenuType">
    {{#if (d.MenuType == '0') { }}
    <span>目录</span>
    {{# }else if(d.MenuType == '1'){ }}
    <span>菜单</span>
    {{# }else if(d.MenuType == '2'){ }}
    <span>API</span>
    {{# } }}
</script>

<script type="text/html" id="tpl_IsEnable">
    <input type="checkbox" name="IsEnable" objid="{{d.Id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="IsEnable" {{ d.IsEnable ? 'checked' : '' }}>
</script>
<script type="text/html" id="tpl_IsExpand">
    <input type="checkbox" name="IsExpand" objid="{{d.Id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="IsExpand" {{ d.IsExpand ? 'checked' : '' }}>
</script>
<script type="text/html" id="tpl_IsShow">
    <input type="checkbox" name="IsShow" objid="{{d.Id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="IsShow" {{ d.IsShow ? 'checked' : '' }}>
</script>
<script type="text/html" id="tpl_IsDisuse">
    {{# if(d.IsDisuse==true){ }}
    已废止
    {{# }else { }}
    -
    {{# } }}
</script>
<script type="text/html" id="tpl_IsSystem">
    {{# if(d.IsSystem==true){ }}
    系统菜单
    {{# }else { }}
    -
    {{# } }}
</script>
<script type="text/html" id="tpl_Icon">
    <i class="layui-icon {{d.Icon}}"></i>
</script>
<script type="text/html" id="tpl_Name">
    {{# if(d.MenuType==0) { }}

    {{# } else if(d.MenuType==1) { }}
    <i class="layui-icon layui-icon-website"></i>
    {{# } else if(d.MenuType==2) { }}
    {{# } else if(d.MenuType==3) { }}
    <i class="layui-icon layui-icon-rate-solid"></i>
    {{# } }}
    {{d.Name}}
</script>

@*<script src="../../component/layui/layui.js"></script>
    <script src="../../component/pear/pear.js"></script>*@
@*<script src="~/lib/layuiplug/treetable/treeTable.js" merge="true"></script>*@
@section Scripts{
    <script>
        layui.use(['layer', 'util', 'table', 'form', 'jquery', 'treeTable', 'dropdown', 'popup'], function () {
            let table = layui.table;
            let form = layui.form;
            let $ = layui.jquery;
            let dropdown = layui.dropdown;
            let treetable = layui.treeTable;
            let popup = layui.popup;
        //let treetable = layui.treetable;

        var cols = [
            { type: 'checkbox' },
            { field: 'Id', width: 50, title: 'ID' },
            { field: 'MenuType', width: 80, title: '菜单类型',  templet: '#tpl_MenuType',hide:true },
            { field: 'Name', width: 260, title: '权限名称',  templet:'#tpl_Name' },
            { field: 'Code', width: 250, title: '菜单ID', edit: 'text' },
            { field: 'PCode', width: 150, title: '上级', edit: 'text' , hide: true},
           
            { field: 'Url', minWidth: 150, title: '地址', edit: 'text'},
            { field: 'Icon', title: '图标', templet: '#tpl_Icon', width: 40, edit: 'text', hide: true },
            { field: 'PermissionStr', minWidth: 200, title: '菜单权限', hide: true},
            { field: 'IsEnable', title: '是否可用', templet: '#tpl_IsEnable',width:95 },
            { field: 'IsExpand', title: '是否展开菜单', templet: '#tpl_IsExpand', width: 105, hide: true },
            { field: 'IsShow', title: ' 是否显示菜单', templet: '#tpl_IsShow', width: 105, hide: true },
            { field: 'IsDisuse', title: '是否废止', templet: '#tpl_IsDisuse', width: 95, hide: true},
            { field: 'IsSystem', title: ' 是否系统菜单', templet: '#tpl_IsSystem', width: 105, hide: true },

            { field: 'Sort', title: '排序',width:60, edit: 'text', hide: true},
            { field: 'Remark', title: '备注', edit: 'text' },
            { title: '操作', toolbar: '#tablebar', width: 230 }
        ];
        //加载数据
        var search = function (data, callback) {
            $.post('@(Url.Action("GetList"))',
              //$.get('../../../lib/Pear-Admin-Layui/admin/data/power.json',
               {
                   TypeCode: $("#TypeCode").val(),
                   KeyWords: $("#KeyWords").val(),
               },
               function (res) {
                   if (res.code == 0) callback(res.data);
                   else callback(res.msg);
               });
            };
            //表格下拉菜单
            window.tableDone = function (res, curr, count) {
                window.dropdowndatahandle(res);
            }
            window.dropdowndatahandle = function a(data) {
                $.each(data, function (index, item) {
                    dropdown.render({
                        elem: '#more_' + item.Id
                        , data: [{
                            title: '导出信息'
                            , id: 100
                        }, {
                            title: '下载文件'
                            , id: 101
                        }, {
                            title: '查看详情'
                            , id: 102
                        }]
                        , id: '#more_' + item.Id
                        , click: function (obj) {
                            layer.tips('点击了：' + obj.title, this.elem, { tips: [1, '#5FB878'] })
                        }
                    });
                    if (item.children != undefined && item.children != null) {
                        window.dropdowndatahandle(item.children);
                    }
                });
            }
            //window.treetable = abc.treetable(treetable, "listData", cols, {
            //    toolbar: '#toolbar', treeIdName: 'powerId', treePidName:'parentId', url: '../../../lib/Pear-Admin-Layui/admin/data/power.json'
            //});
           // window.treetable();
        window.treetable = abc.treetable3("listData", cols, {
            toolbar: '#toolbar',
            reqData: search,
            tree: { arrowType: "arrow2", getIcon: "", iconIndex: 3, isPidData: true, idName: 'Code', pidName: 'PCode' },
            done: window.tableDone
        });

        abc.indexInit();
        // 搜索
        $('#search').click(function () {
            window.refresh();
        });
        var editrowids = "";//编辑了的行ID
        //监听单元格编辑
        treetable.on('edit(listData)', function (obj) {
        var value = obj.value //得到修改后的值
            , data = obj.data //得到所在行所有键值
            , field = obj.field; //得到字段
            //layer.msg('[ID: ' + data.Id + '] ' + field + ' 字段更改为：' + value);

            //遍历对象属性
            for (var datafield in data) {
                if (field === datafield) {
                    if (editrowids.indexOf(data.Id) == -1) {
                        editrowids += "," + data.Id;//把此列标记为已修改
                    }
                    console.dir(datafield);//输出姓名
                    console.dir(data[datafield]);//输出分数
                }

            }
        });
        //监听头工具栏事件
        treetable.on('toolbar(listData)', function (obj) {
            if (obj.event === 'add') {
                 abc.open({ title: '新增', url: '@(Url.Action("Info"))', area: ['100%', '98%'], end:window.refresh });
            } else if (obj.event === 'refresh') {
                window.refresh();
            } else if (obj.event === 'batchRemove') {
                var data = window.treetable.checkStatus();
                if (data.length === 0) {
                    layer.msg("未选中数据", {
                        icon: 3,
                        time: 1000
                    });
                    return false;
                }
                let ids = "";
                for (let i = 0; i < data.length; i++) {
                    ids += data[i].Id + ",";
                }
                ids = ids.substr(0, ids.length - 1);
               // layer.alert(ids);
                abc.delete({url: "@(Url.Action("Delete"))", data: { ids: ids }, success: function () {window.refresh()}});
            } else if (obj.event === 'expandAll') {
                window.treetable.expandAll();
            } else if (obj.event === 'foldAll') {
                window.treetable.foldAll();
            }
        });
        //监听table行事件
        treetable.on('tool(listData)', function (obj) {
            if (obj.event === 'delete') {
                abc.delete({ url: "@(Url.Action("Delete"))", data: { ids: obj.data.Id }, success: function () { obj.del(); window.refresh() } });
            } else if (obj.event === 'edit') {
                window.edit(obj);
            } else if (obj.event === 'setMenuPermission') {
                //, end: window.refresh
                abc.open({ title: '设置菜单权限 - ' + obj.data.Name, url: '@(Url.Action("Index","Permission"))?menuid=' + obj.data.Id, area: ['80%', '80%'] });
            } else if (obj.event === 'save') {
                if (editrowids.indexOf(obj.data.Id) == -1) {
                    popup.failure("请先修改后再保存")
                }
                else {
                    popup.success("保存成功消息")
                }
            }
        })

        //刷新
        window.refresh = function () {
            //table.reload("listData");
            window.treetable.reload();
        };
        //IsEanble 开关事件
        form.on('switch(IsEnable)', function (obj) {
            abc.post({ url: '@(Url.Action("SetState"))', data: { Id: $(this).attr('objid'), state: obj.elem.checked,type:'isenable' }});
        });
        //IsExpand 开关事件
            form.on('switch(IsExpand)', function (obj) {
            abc.post({ url: '@(Url.Action("SetState"))', data: { Id: $(this).attr('objid'), state: obj.elem.checked, type:'isexpand' }});
        });
        //IsShow 开关事件
            form.on('switch(IsShow)', function (obj) {
            abc.post({ url: '@(Url.Action("SetState"))', data: { Id: $(this).attr('objid'), state: obj.elem.checked, type:'isshow' }});
        });

        //table 行双击事件
        treetable.on('rowDouble(listData)', function (obj) { window.edit(obj); });
        //table 行中的事件监听
        //编辑
            window.edit = function (obj) {
              //, end: window.refresh
            abc.open({ title: '编辑', url: '@(Url.Action("Info"))/' + obj.data.Id, area: ['100%', '98%'] });
        }

    })
    </script>
}

@* callback 回调函数
    popup.success("成功消息",callback)
    popup.failure("失败消息",callback)
    popup.warning("警告消息",callback)*@
